<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<ui:composition template="template/commonTemplate.xhtml">

	<ui:define name="pageMetaData">
		<!-- permet de déclarer une ressource qui se trouve dans le dossier css du dossier parent resources -->
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<link rel="stylesheet" media="all" href="../css/style.css" />
		<link rel="stylesheet" media="all" href="../css/repeater.css" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->

		<!-- JS -->
		<script src="../js/jquery-1.7.1.min.js"></script>
		<script src="../js/custom.js"></script>
		<script src="../js/tabs.js"></script>
		<script src="../js/css3-mediaqueries.js"></script>
		<script src="../js/jquery.columnizer.min.js"></script>

		<!-- Isotope -->
		<script src="../js/jquery.isotope.min.js"></script>

		<!-- Lof slider -->
		<script src="../js/jquery.easing.js"></script>
		<script src="../js/lof-slider.js"></script>
		<link rel="stylesheet" href="../css/lof-slider.css" media="all" />
		<!-- ENDS slider -->

		<!-- Tweet -->
		<link rel="stylesheet" href="../css/jquery.tweet.css" media="all" />
		<script src="../js/tweet/jquery.tweet.js"></script>
		<!-- ENDS Tweet -->

		<!-- superfish -->
		<link rel="stylesheet" media="screen" href="../css/superfish.css" />
		<script src="../js/superfish-1.4.8/js/hoverIntent.js"></script>
		<script src="../js/superfish-1.4.8/js/superfish.js"></script>
		<script src="../js/superfish-1.4.8/js/supersubs.js"></script>
		<!-- ENDS superfish -->

		<!-- prettyPhoto -->
		<script src="../js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
		<link rel="stylesheet" href="../js/prettyPhoto/css/prettyPhoto.css"
			media="screen" />
		<!-- ENDS prettyPhoto -->

		<!-- poshytip -->
		<link rel="stylesheet"
			href="../js/poshytip-1.1/src/tip-twitter/tip-twitter.css" />
		<link rel="stylesheet"
			href="../js/poshytip-1.1/src/tip-yellowsimple/tip-yellowsimple.css" />
		<script src="../js/poshytip-1.1/src/jquery.poshytip.min.js"></script>
		<!-- ENDS poshytip -->

		<!-- JCarousel -->
		<script type="text/javascript" src="../js/jquery.jcarousel.min.js"></script>
		<link rel="stylesheet" media="screen" href="../css/carousel.css" />
		<!-- ENDS JCarousel -->

		<!-- GOOGLE FONTS -->
		<link href='http://fonts.googleapis.com/css?family=Voltaire'
			rel='stylesheet' type='text/css' />

		<!-- modernizr -->
		<script src="../js/modernizr.js" />

		<!-- SKIN -->
		<link rel="stylesheet" media="all" href="../css/skin.css" />

		<!-- Less framework -->
		<link rel="stylesheet" media="all" href="../css/lessframework.css" />

		<!-- flexslider -->
		<link rel="stylesheet" href="../css/flexslider.css" />
		<script src="../js/jquery.flexslider.js"></script>
	</ui:define>

	<ui:define name="styles">

	</ui:define>

	<ui:define name="title">Bustle</ui:define>

	<ui:define name="content" id="content">
		<div id="main">
			<f:subview id="toto">
				<h:form id="search">
					<div class="wrapper cf">
						<div id="portfolio-content" class="cf">
							<div id="project-box" class="cf">
								<div class="info" style="margin: 30px; width: auto;">
									<h2 class="heading">Recherche</h2>
									<br />
									<br />
									<div>
										<div>
											Catégorie :
											<h:selectOneMenu value="#{product.selected}">
												<f:selectItem itemLabel="" itemValue="" />
												<f:selectItems var="pt" value="#{product.productTypes}" />
											</h:selectOneMenu>
											Partenaire :
											<h:selectOneMenu value="#{product.idProviderSelected}">
												<f:selectItem itemLabel="" itemValue="000" />
												<f:selectItems var="p" value="#{product.providers}"
													itemLabel="#{p.name}" itemValue="#{p.idProvider}" />
											</h:selectOneMenu>
											<h:commandButton value="Rechercher"
												action="#{product.searchProduct}"></h:commandButton>
										</div>
									</div>
								</div>
							</div>
							<div id="project-box" class="cf">
								<div class="info" style="margin: 30px; width: auto;">
									<h2 class="heading">Produit</h2>
									<br />
									<br />
									<div>
										<ui:repeat var="p" value="#{product.listeAllProduct}">
											<div class="imageProduct">
												<img src="../#{p.image}" alt="alt" />
											</div>
											<div class="contenuProduct">
												<h:outputText value="#{p.name}" class="nameProduct"></h:outputText>
												<br />
												<br />
												<h:outputText value="#{p.description}"></h:outputText>
												<br /> Date limite d'achat :
												<h:outputText value="#{p.limitedDate}">
													<f:convertDateTime pattern="dd/MM/yyy" timeZone="Europe"></f:convertDateTime>
												</h:outputText>
												<h:commandLink value="Détails de l'offre" actionListener="#{product.afficheDetails}" action="article.jsf" class="acheter">
													<f:attribute name="idProduit" value="#{p.idProduct}"></f:attribute>
												</h:commandLink>
												<br />
												<h:outputText value="#{p.price}€" class="nameProduct"></h:outputText>
												<h:commandButton value="Acheter" actionListener="#{product.addToCart}" action="panier.jsf" class="acheter">
													<f:attribute name="pAdd" value="#{p.idProduct}"></f:attribute>
												</h:commandButton>
											</div>
										</ui:repeat>
									</div>
								</div>
							</div>
						</div>
					</div>
				</h:form>
			</f:subview>
		</div>
	</ui:define>
</ui:composition>
</html>